<template>
  <div class='time-line-list'>
    <div class='time-line-item' @click='clickItem(index)' v-for='(item,index) in list' :key='index'>
      <div class='left-line-box'>
        <div class='time' v-if='showTime'>{{item.requestTime}}</div>
        <div class='l-box'>
          <div :class='[index == selectIndex ?"dot blue":"dot"]'></div>
          <div class='line'></div>
        </div>
      </div>
      <div :class='[index == selectIndex ? "right-card selected-card" : "right-card"]'>
        <img :src='[index == selectIndex ? selctItemIcon : xtNameItemIcon]' alt='' :class='[index == selectIndex ? "select-img":""]'>
        <div class='card-info'>
          <div :class='[index == selectIndex ? "name select-txt":"name"]'>{{item.sysName}}</div>
          <div :class='[index == selectIndex ? "url select-txt":"url"]'>{{item.sysAdd}}</div>
        </div>
      </div>
      <a-popover trigger="click" placement="bottomLeft">
        <template #content>
          <div class='popover-btn' style='cursor: pointer;display: flex;align-items: center;justify-content:center;width: 130px' @click='clickEdit(index)'>
            <img src='~@/assets/img/dataCategary/icon_bianji.png' style='width: 22px;height: 20px' alt=''/>
            <span style='margin-left: 18px'>编辑</span>
          </div>
        </template>
        <img src='~@/assets/img/dataCategary/icon_yy_more.png' class='yy_tool_img' alt='' v-if='index == selectIndex && showEdit'>
      </a-popover>
    </div>
  </div>

</template>

<script>
export default {
  name: 'xtNameTimeLine',
  props:{
    list:{
      type:Array,
      default:()=>[]
    },
    //是否展示时间
    showTime:{
      type:Boolean,
      default:false
    },
    //是否显示编辑
    showEdit:{
      type:Boolean,
      default:false
    },
  },
  data(){
    return{
      //时间轴item icon图标
      xtNameItemIcon:require('@/assets/img/dataCategary/icon_zaihai.png'),
      //选中时图标
      selctItemIcon:require('@/assets/img/dataCategary/icon_zaihai_s.png'),
      //选中下标
      selectIndex:0
    }
  },
  methods:{
    //点击item
    clickItem(index){
      this.selectIndex = index
      this.$emit('backClickItem',this.selectIndex)
    },
    //点击编辑
    clickEdit(index){
      this.$emit('backClickEdit',this.selectIndex)
    }
  }
}
</script>

<style scoped lang='less'>
.time-line-item{
  display: flex;
  .left-line-box{
    display: flex;
    .time{
      width: 75px;
      height: 34px;
      font-size: 12px;
      font-weight: 400;
      color: #999999;
      line-height: 17px;
    }
    .l-box{
      .dot{
        width: 7px;
        height: 7px;
        background: #BAC3C8;
        border-radius: 50%;
      }
      .blue{
        background: #3477FF;
      }
      .line{
        width: 1px;
        height: 100px;
        background: #E7E9EC;
        margin-left: 3px;
      }
    }
  }
  .right-card{
    margin-top: 20px;
    margin-left: 20px;
    width: 308px;
    height: 76px;
    background: rgba(52,119,255,0.08);
    border-radius: 2px;
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    img{
      width: 20px;
      height: 20px;
    }
    .select-img{
      background: #fff;
    }
    .card-info{
      margin-left: 10px;
      overflow: hidden;
      width: 100%;
      .name{
        width: 100%;
        font-size: 14px;
        font-weight: 500;
        color: #1B2C49;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .url{
        margin-top: 10px;
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        color: #73848F;
        line-height: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .select-txt{
        color: #fff;
      }
    }
  }
  .yy_tool_img{
    width: 10px;
    height: 20px;
    position: relative;
    top: 48px;
    left: 25px;
    cursor: pointer;
  }
  .popover-btn{

  }
  .selected-card{
    background: #3477FF;
  }
}
</style>